<div class="change-password-container">
  <div class="change-password-card-wrapper">
    <div class="change-password-card-border">
      <div class="change-password-card">
        <div class="change-password-header">
          <div class="logo-wrapper">
            <div class="icon-circle">
              <i class="pi pi-key"></i>
            </div>
          </div>
          <h1 class="change-password-title">Change Password</h1>
          <p class="change-password-subtitle">Update your password to keep your account secure</p>
        </div>

        <form class="change-password-form" #changePasswordForm="ngForm" (ngSubmit)="changePassword()">
          <div class="form-field">
            <label for="currentPassword" class="form-label">
              <i class="pi pi-lock"></i>
              <span>Current Password</span>
            </label>
            <p-password
              id="currentPassword"
              name="currentPassword"
              required
              [(ngModel)]="currentPassword"
              [feedback]="false"
              placeholder="Enter your current password"
              [toggleMask]="true"
              [fluid]="true"
              autocomplete="current-password"
            ></p-password>
          </div>

          <div class="form-field">
            <label for="newPassword" class="form-label">
              <i class="pi pi-lock-open"></i>
              <span>New Password</span>
            </label>
            <p-password
              id="newPassword"
              name="newPassword"
              required
              [(ngModel)]="newPassword"
              [feedback]="false"
              placeholder="Enter your new password"
              [toggleMask]="true"
              [fluid]="true"
              autocomplete="new-password"
            ></p-password>
          </div>

          <div class="form-field">
            <label for="confirmNewPassword" class="form-label">
              <i class="pi pi-check-circle"></i>
              <span>Confirm New Password</span>
            </label>
            <p-password
              id="confirmNewPassword"
              name="confirmNewPassword"
              required
              [(ngModel)]="confirmNewPassword"
              [feedback]="false"
              placeholder="Confirm your new password"
              [toggleMask]="true"
              [fluid]="true"
              autocomplete="new-password"
            ></p-password>
            @if (!passwordsMatch && confirmNewPassword) {
              <small class="field-error">
                <i class="pi pi-exclamation-circle"></i>
                New passwords do not match
              </small>
            }
          </div>

          <p-button
            fluid
            type="submit"
            label="Update Password"
            icon="pi pi-check"
            [disabled]="!changePasswordForm.valid || !passwordsMatch"
            class="change-password-button"
          />

          @if (errorMessage) {
            <div class="message-container error-message">
              <p-message severity="error">{{ errorMessage }}</p-message>
            </div>
          }

          @if (successMessage) {
            <div class="message-container success-message">
              <p-message severity="success">{{ successMessage }}</p-message>
            </div>
          }
        </form>
      </div>
    </div>
  </div>
</div>
